<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="88px"
    >
      <el-form-item label="传感器类型">
        <!--  clearable -->
        <el-select
          v-model="queryParams.type"
          placeholder="传感器类型"
          size="small"
          @clear="cleartype"
          @change="changetype"
          :popper-append-to-body="false"
          style="width: 130px; margin-right: 5px"
        >
          <el-option
            v-for="dicts in types"
            :key="dicts.value"
            :label="dicts.lable"
            :value="dicts.value"
          />
        </el-select>
        <el-select
          v-model="queryParams.ssTransducerType"
          placeholder="请选择传感器类型"
          size="small"
          @clear="clearsducerCode"
          @change="changes"
          :popper-append-to-body="false"
          :disabled="isTypesducerCode"
        >
          <el-option
            v-for="dicts in typeList"
            :key="dicts.ss_transducer_type"
            :label="dicts.ss_transducer_name"
            :value="dicts.ss_transducer_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getsafeList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetForm('queryForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <p class="title">瓦斯实时报警列表</p>
    <el-table
      v-loading="loading"
      :data="safeList"
      :header-cell-style="thaderBack"
      height="433px"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ssTransducerCode"
        label="传感器编号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerPoint"
        label="传感器监测地点"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerTypeName"
        label="传感器类型"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerValue"
        label="监测值"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssAlarmStime"
        label="报警开始时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssAlarmDuration"
        label="报警时长"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ssTransducerState"
        label="状态"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.ssTransducerState == '1'
              ? '正常'
              : scope.row.ssTransducerState == '2'
              ? '断线'
              : scope.row.ssTransducerState == '3'
              ? '报警'
              : scope.row.ssTransducerState == '4'
              ? '负漂'
              : scope.row.ssTransducerState == '5'
              ? '溢出'
              : scope.row.ssTransducerState == '6'
              ? '调校'
              : scope.row.ssTransducerState == '7'
              ? '中断（分站）'
              : scope.row.ssTransducerState == '8'
              ? '不巡检'
              : scope.row.ssTransducerState == '9'
              ? '故障'
              : scope.row.ssTransducerState == '10'
              ? '断电'
              : '其他'
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      layout="total,prev, pager, next, jumper"
      :total="total1"
      class="pager"
    >
    </el-pagination> -->
    <p class="title">瓦斯历史报警列表</p>
    <el-table
      v-loading="loading"
      :data="tableList"
      :header-cell-style="thaderBack"
      height="433px"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ss_transducer_code" label="传感器编号">
      </el-table-column>
      <el-table-column
        prop="ss_transducer_point"
        label="传感器监测地点"
        width="250"
      >
      </el-table-column>

      <!-- <el-table-column prop="inOutType" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.inOutType == '1' ? '模拟量' : '开关量' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="ss_transducer_value" label="监测值">
        <!-- <template slot-scope="scope">
          <span>{{
            scope.row.inOutType == '1'
              ? scope.row.ssTransducerValue + '(' + scope.row.company + ')'
              : scope.row.ssTransducerValueName
          }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="ss_alarm_stime"
        label="报警开始时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ss_alarm_etime"
        label="报警结束时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ss_alarm_duration"
        label="报警时长"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="ss_transducer_state" label="状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.ss_transducer_state == '1'
              ? '正常'
              : scope.row.ss_transducer_state == '2'
              ? '断线'
              : scope.row.ss_transducer_state == '3'
              ? '报警'
              : scope.row.ss_transducer_state == '4'
              ? '负漂'
              : scope.row.ss_transducer_state == '5'
              ? '溢出'
              : scope.row.ss_transducer_state == '6'
              ? '调校'
              : scope.row.ss_transducer_state == '7'
              ? '中断（分站）'
              : scope.row.ss_transducer_state == '8'
              ? '不巡检'
              : scope.row.ss_transducer_state == '9'
              ? '故障'
              : scope.row.ss_transducer_state == '10'
              ? '断电'
              : '其他'
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  listInfo,
  getInfo,
  addInfo,
  updateInfo,
  updateInfo1
} from '@/api/security/safepolicereal'
export default {
  data() {
    return {
      activeName: 'first',
      safeList: [],
      tableList: [],
      list: [],
      timer: '',
      timer2: '',
      coalmineList: [],
      // pageNum1: 1,
      // pageSize1: 10,
      total1: null,
      list2: [],
      total2: null,
      csMineCode: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        type: '',
        ssTransducerType: '',
        ssTransducerCode: ''
      },
      // queryParams2: {
      //   pageNum: 1,
      //   pageSize: 10000,
      //   csMineCode: '',
      //   ssTransducerCode: ''
      // },
      typeList: [],
      types: [
        {
          lable: '模拟量',
          value: '1'
        },
        {
          lable: '开关量',
          value: '2'
        }
      ],
      typevalue: '',
      isTypesducerCode: true,
      loading: false
    }
  },
  mounted() {
    setInterval(() => {
      this.getsafeList()
      this.gettableList()
    }, 60000)
  },
  methods: {
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10000,
        type: '',
        ssTransducerType: '',
        ssTransducerCode: ''
      }
      //  this.resetForm('queryParams')
    },
    thaderBack() {
      return {
        // background: '#0069eb',
        // color: '#fff',
        // textAlign: 'center',
        fontSize: '0.14rem'
      }
    },
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
      }
      this.reset()
      this.getsafeList()
      this.gettableList()
    },
    getCoalmine() {
      this.$http.post('/system/info/list', this.queryParams).then(response => {
        this.loading = false
        if (response.data.code === 200) {
          this.coalmineList = response.data.rows
        }
      })
    },
    cleartype() {
      this.queryParams.ssTransducerCode = ''
      this.isTypesducerCode = true
      this.getsafeList()
      this.gettableList()
    },
    clearsducerCode() {
      this.getsafeList()
      this.gettableList()
    },
    changetype(e) {
      this.typevalue = e
      this.queryParams.ssTransducerCode = ''
      this.isTypesducerCode = false
      this.gettypelist()
    },
    gettypelist() {
      var typevalue = {
        type: this.typevalue
      }
      listInfo(typevalue).then(response => {
        if (response.code === 200) {
          this.typeList = response.data
        }
      })
    },
    handleSizeChange1(limit) {
      this.queryParams.pageSize = limit
      this.getsafeList()
    },
    handleCurrentChange1(page) {
      this.queryParams.pageNum = page
      this.getsafeList()
    },
    cellStyleFun() {
      return 'text-align:center'
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'evencolor'
      } else {
        return 'oddcolor'
      }
    },
    changes() {
      this.queryParams.pageNum = '1'
      this.getsafeList()
      this.gettableList()
      clearTimeout(this.timer)
      clearTimeout(this.timer2)
    },
    getsafeList() {
      this.safeList = []
      addInfo(this.queryParams).then(res => {
        this.list = res.rows
        this.total1 = res.total
        this.safeList = this.list.slice(0, 8)
        var index = 0
        this.timer = () => {
          index += 8
          if (index > this.list.length) {
            index = 0
          }
          this.safeList = []
          this.safeList = this.list.slice(index, index + 8)
        }
        setInterval(this.timer, 5000)
      })
    },
    gettableList() {
      // console.log(98, queryParams)
      var querys = {
        ssTransducerCode: this.queryParams.ssTransducerCode,
        inOutType: this.typevalue
      }
      getInfo(querys).then(res => {
        this.list2 = res.data.data
        this.total2 = res.data.total
        this.tableList = this.list2.slice(0, 8)
        var index = 0
        this.timer2 = () => {
          index += 8
          if (index > this.list2.length) {
            index = 0
          }
          this.tableList = []
          this.tableList = this.list2.slice(index, index + 8)
        }
        setInterval(this.timer2, 5000)
      })
    }
  },
  created() {
    // this.$store.commit('getMineCode')
    // const MineCode = this.$store.state.user.MineCode
    // if (MineCode != 'null') {
    //   this.queryParams.csMineCode = MineCode
    //   this.csMineCode = MineCode
    // } else {
    //   this.queryParams.csMineCode = ''
    //   this.csMineCode = ''
    // }
    this.getsafeList()
    this.gettableList()
  }
}
</script>
<style  lang="scss" scoped>
.pager {
  display: none;
}
.title {
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
}
</style>

